<div class="relative flex items-center justify-center p-10 my-10 loading">
	<div class="hex" />
	<div class="hex" />
	<div class="hex" />
	<div class="hex" />
	<div class="hex" />
	<div class="hex" />
	<div class="hex" />
</div>

<style>
	.loading {
		animation: fadeIn 2s cubic-bezier(0.42, 0, 0.58, 1) 1;
		animation-fill-mode: forwards;
	}

	.hex:nth-child(1) {
		top: 10px;
		left: 17px;
		animation-delay: 0.1s;
	}

	.hex:nth-child(2) {
		top: 10px;
		left: 51px;
		animation-delay: 0.2s;
	}

	.hex:nth-child(3) {
		top: 40px;
		left: 70px;
		animation-delay: 0.3s;
	}

	.hex:nth-child(4) {
		top: 70px;
		left: 51px;
		animation-delay: 0.4s;
	}

	.hex:nth-child(5) {
		top: 70px;
		left: 17px;
		animation-delay: 0.5s;
	}

	.hex:nth-child(6) {
		top: 40px;
		left: 0;
		animation-delay: 0.6s;
	}

	.hex:nth-child(7) {
		top: 40px;
		left: 35px;
		animation-delay: 0.7s;
	}

	.hex:nth-child(8) {
		top: 10px;
		left: 17px;
		animation-delay: 0.1s;
	}

	.hex {
		position: absolute;
		width: 30px;
		height: 20px;
		background-color: #fff;
		/* opacity: 0.2 */
		animation: fade 1.5s infinite ease;
		box-shadow: 0 0 10px #fff, 0 0 20px#fff;
		opacity: 0.1;
	}

	.hex:before,
	.hex:after {
		position: absolute;
		content: '';
		width: 0;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
	}

	.hex:before {
		border-bottom: 8px solid #fff;
		bottom: 100%;
	}

	.hex:after {
		/* width: 0; */
		top: 100%;
		border-top: 8px solid #fff;
	}

	@keyframes fade {
		0% {
			opacity: 1;
			transform: scale(1);
		}
		20% {
			opacity: 0;
			transform: scale(0.2);
		}
		42% {
			opacity: 0.1;
			transform: scale(0.6);
		}
		49% {
			opacity: 0.5;
			transform: scale(1);
		}
		100% {
			opacity: 1;
			transform: scale(1);
		}
	}

	@keyframes fadeIn {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
</style>
